<template>
  <div>
    <p>水果店</p>
    <span>苹果10￥/斤，折扣 &lt;8折&gt;</span>
    <br />
    <p>
      <span>请输入您需要购买的斤数</span
      ><input type="number" v-model.number="asd.jiage" />
    </p>
    <br />
    <p><button @click="fn">结账买单</button></p>
    <br />
    <span
      >结账单：总价： {{ abc.preice * abc.jiage }}元子 折后价：{{
        abc.preice * abc.jiage * 0.8
      }}
      元子 省了：{{
        abc.preice * abc.jiage - abc.preice * abc.jiage * 0.8
      }}元子</span
    >
  </div>
</template>

<script>
export default {
  // name: "",
  components: {},
  props: {},
  data() {
    return {
      abc: {
        preice: 10,
        jiage: 0,
      },
      asd: {
        preice: 10,
        jiage: "",
      },
    };
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    fn() {
      if (this.asd.jiage < 0) {
        this.asd.jiage = "";
        alert("请输入大于0的数字");
        return;
      }
      this.abc = this.asd;
      this.asd = {
        preice: 10,
        jiage: "",
      };
    },
  },
};
</script>

<style scoped>
p {
  text-align: center;
  font-size: 26px;
}
span {
  text-align: center;
  display: block;
  font-size: 20px;
}
input {
  width: 200px;
  height: 30px;
  font-size: 20px;
}
button {
  width: 150px;
}
</style>
